<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1. 引入模板引擎-->
    <script src="./art-template.js"></script>
    <style>
        li {
            display: flex;
            border-bottom: 1px solid #aaa;
            height: 60px;
            align-items: center;
            position: relative;
        }

        img {
            width: 40px;
        }

        p {
            padding: 0 10px;
        }

        time {
            position: absolute;
            right: 10px;
            top: 10px;
        }
    </style>
</head>

<body>
    <ul>

    </ul>
    <!-- 2. 创建了模板-->
    <script id="aaa" type="text/html">
           {{each data as item}}
           <li>
               <img src="{{item.author.avatar_url}}" alt="">
               <div>
                  <span>{{item.reply_count}}</span>
                  /
                  <span>{{item.visit_count}}</span>
               </div>
               {{if item.top}}
               <p>置顶</p>
               {{else if item.good}}
               <p>精华</p>
               {{else if item.tab === "share"}}
               <p>分享</p>
               {{else}}
               <p>问答</p>
               {{/if}}

               <h4>{{item.title}}</h4>

               <time>{{item.last_reply_at | fun}}</time>
           </li>
           {{/each}}
    </script>
    <script>
        // 3.使用ajax获取数据
        var xhr = new XMLHttpRequest();
        xhr.open("get", "https://cnodejs.org/api/v1/topics?page=2");
        xhr.send();
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                var bbb = JSON.parse(xhr.responseText);
                console.log(bbb);

                // 6.辅助函数
                template.helper("fun", function (param) {
                    // 获取当前时间距离1970年的毫秒值
                    var time1 = new Date().getTime();
                    // 获取最后评论时间距离1970年的毫秒值
                    var time2 = new Date(param).getTime();
                    var time3 = time1- time2;
                    console.log(parseInt(time3 / 1000 / 60 / 60 / 24 / 30 / 12));
                    if (parseInt(time3 / 1000 / 60 / 60 / 24 / 30 / 12)) {
                        return parseInt(time3 / 1000 / 60 / 60 / 24 / 30 / 12) + "年前"
                    } else if (parseInt(time3 / 1000 / 60 / 60 / 24 / 30 % 12)) {
                        return parseInt(time3 / 1000 / 60 / 60 / 24 / 30 % 12) + "月前"
                    } else if (parseInt(time3 / 1000 / 60 / 60 / 24 % 30)) {
                        return parseInt(time3 / 1000 / 60 / 60 / 24 % 30) + "天前"
                    } else if (parseInt(time3 / 1000 / 60 / 60 % 24)) {
                        return parseInt(time3 / 1000 / 60 / 60 % 24) + "小时前"
                    } else if (parseInt(time3 / 1000 / 60 % 60)) {
                        return parseInt(time3 / 1000 / 60 % 60) + "分钟前"
                    } else if (parseInt(time3 / 1000 % 60)) {
                        return parseInt(time3 / 1000 % 60) + "秒前"
                    }
                })
                // 4.将数据与模板相结合
                var ccc = template("aaa", bbb);
                // console.log(ccc);
                // 5
                document.querySelector("ul").innerHTML = ccc
            }
        }
    </script>
</body>

</html>